<template>
  <vxe-modal
    title="查看合同信息"
    v-model="dialogVisible"
    v-if="dialogVisible"
    :loading="loading"
    width="70%" showFooter esc-closable show-zoom resize>

    <div style="height: 80vh; overflow-y: auto;">
      <el-card class="box-card" shadow="never" :body-style="{ padding: '10px',backgroundColor: '#bfcdda' }">
        <!-- 基本信息 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">基本信息</span>
          </div>
          <el-descriptions class="margin-top" :column="2" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  合同名称：
                </div>
              </template>
              {{ htData.htName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  关联项目：
                </div>
              </template>
              {{ htData.glXm }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  合同编号：
                </div>
              </template>
              {{ htData.htBh }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  密级：
                </div>
              </template>
              {{ htData.mj }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  起止年月：
                </div>
              </template>
              {{ htData.qTime  + ' 至 ' + htData.zTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  录入人员：
                </div>
              </template>
              {{ htData.lrRy}}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <br>
        <!-- 项目承担单位 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">项目承担单位</span>
          </div>
          <el-descriptions class="margin-top" :column="2" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  承担单位：
                </div>
              </template>
              {{ htData.cdDw }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  乙方法人/授权代表：
                </div>
              </template>
              {{ htData.yfFr }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  开户银行：
                </div>
              </template>
              {{ htData.khYh }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  银行账号：
                </div>
              </template>
              {{ htData.yhZh }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  开户名称：
                </div>
              </template>
              {{ htData.khName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  签订日期：
                </div>
              </template>
              {{ htData.qdTime }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <br>
        <!-- 负责人情况 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">负责人情况</span>
          </div>
          <el-descriptions class="margin-top" :column="3" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  姓名：
                </div>
              </template>
              {{ htData.fzName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  地址：
                </div>
              </template>
              {{ htData.fzDz }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  邮编：
                </div>
              </template>
              {{ htData.fzYb }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  邮箱：
                </div>
              </template>
              {{ htData.fzYx }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  电话：
                </div>
              </template>
              {{ htData.fzPhone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  传真：
                </div>
              </template>
              {{ htData.fzCz }}
            </el-descriptions-item>

          </el-descriptions>
        </el-card>
        <br>
        <!-- 项目经费预算 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">项目经费预算</span>
          </div>
          <el-descriptions class="margin-top" :column="3" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目总经费(万元)：
                </div>
              </template>
              {{ htData.xmZjf }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  甲方支付(万元)：
                </div>
              </template>
              {{ htData.jfZf }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  乙方自筹(万元)：
                </div>
              </template>
              {{ htData.yfZc }}
            </el-descriptions-item>

          </el-descriptions>
        </el-card>
        <br>
        <!-- 项目经费支付计划 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">项目经费支付计划</span>
          </div>
          <el-descriptions class="margin-top" :column="3" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  合同总额(万元)：
                </div>
              </template>
              {{ htData.htZe }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  甲方向乙方提供经费(万元)：
                </div>
              </template>
              {{ htData.jfToYf }}
            </el-descriptions-item>

          </el-descriptions>
        </el-card>
        <br>
        <!-- 课题主要技术内容, 主要技术难点, 研究路线及研究方法 -->
        <el-card class="box-card" shadow="hover" style="min-height: 25vh">

          <span style="font-size: 16px; color: #000000; font-weight: 600">1、课题主要技术内容:</span>
          <div class="ql-container ql-snow" style="border: 1px solid #ffffff;">
            <div class="ql-editor" style="font-size: 16px">
              <div v-html="htData.zyYjNr"></div>
            </div>
          </div>
          <span style="font-size: 16px; color: #000000; font-weight: 600">2、主要技术难点:</span>
          <div class="ql-container ql-snow" style="border: 1px solid #ffffff;">
            <div class="ql-editor" style="font-size: 16px">
              <div v-html="htData.zyJsNd"></div>
            </div>
          </div>
          <span style="font-size: 16px; color: #000000; font-weight: 600">3、研究路线及研究方法:</span>
          <div class="ql-container ql-snow" style="border: 1px solid #ffffff;">
            <div class="ql-editor" style="font-size: 16px">
              <div v-html="htData.yjlxYjff"></div>
            </div>
          </div>
        </el-card>
        <!-- 主要技术经济指标 -->
        <el-card class="box-card" shadow="hover" style="min-height: 25vh">

          <span style="font-size: 16px; color: #000000; font-weight: 600">主要技术经济指标:</span>
          <div class="ql-container ql-snow" style="border: 1px solid #ffffff;">
            <div class="ql-editor" style="font-size: 16px">
              <div v-html="htData.jsJjZb"></div>
            </div>
          </div>
        </el-card>
        <!-- 1、最终成果内容及形式: 2、成果验收方式:  3、成果验收标准: -->
        <el-card class="box-card" shadow="hover" style="min-height: 25vh">

          <span style="font-size: 16px; color: #000000; font-weight: 600">1、最终成果内容及形式:</span>
          <div class="ql-container ql-snow" style="border: 1px solid #ffffff;">
            <div class="ql-editor" style="font-size: 16px">
              <div v-html="htData.cgnrAndXs"></div>
            </div>
          </div>
          <span style="font-size: 16px; color: #000000; font-weight: 600">2、成果验收方式:</span>
          <div class="ql-container ql-snow" style="border: 1px solid #ffffff;">
            <div class="ql-editor" style="font-size: 16px">
              <div v-html="htData.cgYsFf"></div>
            </div>
          </div>
          <span style="font-size: 16px; color: #000000; font-weight: 600">3、成果验收标准:</span>
          <div class="ql-container ql-snow" style="border: 1px solid #ffffff;">
            <div class="ql-editor" style="font-size: 16px">
              <div v-html="htData.cgYsBz"></div>
            </div>
          </div>
        </el-card>
        <br>
        <!-- 年度计划和考核目标 -->
        <el-card class="box-card" shadow="hover" style="min-height: 25vh">

          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">年度计划和考核目标</span>
          </div>
          <el-table :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                    :data="NdjhData">
            <el-table-column label="序号" align="center" type="index" width="50"/>
            <el-table-column label="开始年月" prop="ksRq" align="center">
            </el-table-column>
            <el-table-column label="结束年月" prop="jsRq" align="center">
            </el-table-column>
            <el-table-column label="研发内容" align="center" prop="yfNr">
            </el-table-column>
            <el-table-column label="阶段目标" align="center" prop="jdMb">
            </el-table-column>
            <!-- 其他列配置 -->
          </el-table>
        </el-card>
        <br>
        <!-- 课题经费 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">课题经费</span>
          </div>
          <el-descriptions class="margin-top" :column="3" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目总经费(万元)：
                </div>
              </template>
              {{ htData.xmZjf }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  甲方支付(万元)：
                </div>
              </template>
              {{ htData.jfZf }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  乙方自筹(万元)：
                </div>
              </template>
              {{ htData.yfZc }}
            </el-descriptions-item>

          </el-descriptions>
        </el-card>
        <br>
        <!-- 项目经费预算 -->
        <el-card class="box-card" shadow="hover" style="min-height: 25vh">

          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">项目经费预算</span>
          </div>
          <el-table height="50vh" :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                    :data="YsJfData">
            <el-table-column label="序号" align="center" type="index" width="50"/>
            <el-table-column label="项目" show-overflow-tooltip header-align="center" width="400" prop="xm"/>
            <el-table-column align="center" label="项目总预算(万元)" prop="xmZys"/>
            <el-table-column align="center" label="第一年度预算" prop="oneYs"/>
            <el-table-column align="center" label="第二年度预算" prop="towYs"/>
            <el-table-column align="center" label="第三年度预算" prop="threeYs"/>
            <el-table-column align="center" label="第四年度预算" prop="fourYs"/>
            <el-table-column align="center" label="第五年度预算" prop="fiveYs"/>
            <!-- 其他列配置 -->
          </el-table>
        </el-card>
        <br>
        <!-- 课题经费 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">课题经费</span>
          </div>
          <el-descriptions class="margin-top" :column="3" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  合同总额(万元)：
                </div>
              </template>
              {{ htData.htZe }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  甲方向乙方提供经费(万元)：
                </div>
              </template>
              {{ htData.jfToYf }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <br>
        <!-- 项目经费支付计划 -->
        <el-card class="box-card" shadow="hover" style="min-height: 25vh">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">项目经费支付计划</span>
          </div>
          <el-table height="25vh" :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                    :data="ZfJhData">
            <el-table-column label="序号" align="center" type="index" width="50"/>
            <el-table-column label="年度" align="center" prop="nd" width="260"/>
            <el-table-column label="收款单位" align="center" prop="skDw"/>
            <el-table-column label="金额(万元)" align="center" prop="je" width="180"/>
            <el-table-column label="其中贷款(万元)" align="center" prop="qzDk" width="180"/>
          </el-table>
        </el-card>
        <br>
        <!-- 课题承担人员表 -->
        <el-card class="box-card" shadow="hover" style="min-height: 25vh">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">课题承担人员表</span>
          </div>
          <el-table height="40vh" :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                    :data="CdRyData">
            <el-table-column label="序号" align="center" type="index" width="50"/>
            <el-table-column label="姓名" align="center" prop="name" width="150" show-overflow-tooltip/>
            <el-table-column label="单位" align="center" prop="gzDw" show-overflow-tooltip/>
            <el-table-column label="年龄" align="center" prop="age" width="100" show-overflow-tooltip/>
            <el-table-column label="职务" align="center" prop="zhiWu" show-overflow-tooltip/>
            <el-table-column label="职称" align="center" prop="zhiChen" show-overflow-tooltip/>
            <el-table-column label="专业" align="center" prop="zy" show-overflow-tooltip/>
            <el-table-column label="承担的主要工作" align="center" prop="bKtFg" show-overflow-tooltip/>
            <el-table-column label="投入月数" align="center" prop="trZys" show-overflow-tooltip/>
          </el-table>
        </el-card>
        <br>
        <!-- 合同附件 -->
        <el-card class="box-card" shadow="hover" style="min-height: 25vh">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">合同附件</span>
          </div>
          <el-table height="30vh" :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                    :data="HtbzFjData">
            <el-table-column label="序号" align="center" type="index" width="50"/>
            <el-table-column label="文件名称" align="center" :formatter="getFileNames" prop="fileName"/>
            <el-table-column label="文件大小" align="center" prop="fileSize" width="150"/>
            <el-table-column label="操作" align="center" width="150">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleDownload(scope.row)"
                >下载
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

      </el-card>
    </div>
    <div slot="footer" class="dialog-footer dialog-footer-center">
      <el-button @click="dialogVisible=false">关闭</el-button>
    </div>
  </vxe-modal>
</template>
<script>

import {
  getHtbz, selectHtglHtbzCdRyByHtbzId,
  selectHtglHtbzNdjhByHtbzId,
  selectHtglHtbzYsJfByHtbzId,
  selectHtglHtbzZfJhByHtbzId
} from "@/api/xmgl/htgl/htbz/htbz";

export default {
  name: "HtXq", //合同详情界面
  dicts: ['sys_user_sex', 'rcpt_zc', 'rcpt_sxly', 'rcpt_ryfl', 'rcpt_sf'],
  data() {
    return {
      loading: false,
      htData: [], //合同基本信息与附件信息
      NdjhData: [], //年度计划和考核目标信息
      YsJfData: [], //项目预算经费信息
      ZfJhData: [], //项目经费支付计划信息
      CdRyData: [], //课题承担人员表信息
      HtbzFjData: [], //合同附件信息
      htbzId: null, //合同主键ID
      beforeData: [],
      beforeDataLoading: false,
      denyTo: null,
      dialogVisible: false,
      rowData: null,
      content_style: {
        // 解决不对齐的问题
        'width': "400px",
        // 排列第二行
        'word-break': 'break-all',
        // 'background-color': '#f3f7ff'
      },
      label_style: {
        // 解决不对齐的问题
        'width': "250px",
        // 排列第二行
        'word-break': 'break-all',
      },
      kjRyFjData: [], //附件资料列表
      kjRyGzlvData: [], //科技人员工作履历列表
    };
  },
  created() {
  },
  methods: {
    // 文件下载处理
    handleDownload(row) {
      const resource = row.fileName;
      // 默认方法
      this.$download.resource(resource);
    },
    getFileNames(row) {
      // 从路径中提取文件名
      return row.fileName.split('/').pop(); // 返回文件名部分
    },
    handleOpen(row) {
      this.rowData = row
      this.loading = true;
      this.htbzId = row.htbzId
      this.dialogVisible = true
      this.getHeTongData()
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    //获取详情数据
    getHeTongData() {
      const htbzId = this.htbzId
      getHtbz(htbzId).then(res => {
        this.htData = res.data
        this.HtbzFjData = res.data.htglHtbzFjList
      })
      selectHtglHtbzNdjhByHtbzId(htbzId).then(res => {
        this.NdjhData = res.data.htglHtbzNdjhList;
      })
      selectHtglHtbzYsJfByHtbzId(htbzId).then(res => {
        this.YsJfData = res.data.htglHtbzYsjfList;
      })
      selectHtglHtbzZfJhByHtbzId(htbzId).then(res => {
        this.ZfJhData = res.data.htglHtbzZfjhList;
      })
      selectHtglHtbzCdRyByHtbzId(htbzId).then(res => {
        this.CdRyData = res.data.htglHtbzCdryList;
      })
    },

  }
};
</script>

